<template>
    <div class="chatLog">
        <div class="header flexbetween mb20">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <el-input placeholder="请输入关键字搜索" v-model="keyword" size="small" style="width: 300px">
                    <span slot="suffix" class="iconfont icon-sousuo"></span>
                </el-input>
            </div>
            <div class="iconBtn">
                <el-tooltip effect="light" content="筛选" placement="top" :enterable="false">
                    <span class="iconfont icon-shaixuan" @click="searchVisivle = !searchVisivle"></span>
                </el-tooltip>
            </div>
        </div>
        <div class="card" style="height: calc(100% - 75px);">
            <div class="card-header flexbetween">
                <span class="title">聊天日志</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai" @click="exportAll"></span>
                </el-tooltip>
            </div>
            <div class="card-body">
                <element-table :data="chatLogList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                               :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
                </element-table>
            </div>
        </div>

        <!-- 筛选 -->
        <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
            <div id="chatLogSearch" class="filterDialog" v-show="searchVisivle">
                <div class="searchBox">
                    <div class="searchItem" style="display: flex;align-items: center;">
                        <span>渠道入口</span>
                        <a-select v-model="sourceIds" mode="multiple" style="width: 520px">
                            <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                                {{ source.sourceName }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="searchItem">
                        <span>用户姓名</span>
                        <el-input size="small" v-model="userName"></el-input>
                    </div>
                    <div class="searchItem">
                        <span>用户ID</span>
                        <el-input size="small" v-model="userId"></el-input>
                    </div>
                    <div class="searchItem">
                        <span>是否转人工</span>
                        <el-select v-model="serviceType" placeholder="请选择" clearable size="small">
                            <el-option label="是" value="seat"></el-option>
                            <el-option label="否" value="robot"></el-option>
                        </el-select>
                    </div>
                    <div class="searchItem">
                        <span>会话ID</span>
                        <el-input size="small" v-model="sessionId"></el-input>
                    </div>
                </div>
                <div class="footer">
                    <el-button size="small" type="text" @click="searchVisivle = false">取消</el-button>
                    <el-button size="small" plain @click="resetSearch">重置</el-button>
                    <el-button type="primary" size="small">保存</el-button>
                </div>
            </div>
        </transition>

        <el-drawer :visible.sync="drawerVisible" :modal="false" :size="980" custom-class="logDrawer" :show-close="false" append-to-body>
            <div slot="title" style="display:flex">
                <span class="iconfont icon-guanbi2 close" @click="drawerVisible = false"></span>
                <div class="flexbetween header" style="flex: 1;height: 60px;padding-right: 20px">
                    <div class="title-header">
                        <p>会话记录</p>
                        <p>会话ID: <span>{{detailInfo.sessionId}}</span></p>
                    </div>
                    <div class="iconBtn">
                        <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                            <span class="iconfont icon-xiazai"></span>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <el-descriptions :column="2" labelClassName="descLabel" contentClassName="descContent">
                <el-descriptions-item label="用户ID">
                    <div :title="detailInfo.userId">{{detailInfo.userId}}</div>
                </el-descriptions-item>
                <el-descriptions-item label="用户姓名">
                    <div :title="detailInfo.userName">{{detailInfo.userName}}</div>
                </el-descriptions-item>
                <el-descriptions-item label="开始时间">
                    <div :title="detailInfo.questionCreateTime">{{detailInfo.questionCreateTime}}</div>
                </el-descriptions-item>
                <el-descriptions-item label="渠道">
                    <div :title="detailInfo.sourceName">{{detailInfo.sourceName}}</div>
                </el-descriptions-item>
            </el-descriptions>
            <div class="chat-content">
                <div class="chatBox robotChatLog">
                    <chat-list :chatListData="chatListData"></chat-list>
                    <div class="chat-search">
                        <el-input placeholder="请输入关键字搜索" size="small">
                            <span slot="suffix" class="iconfont icon-sousuo"></span>
                        </el-input>
                    </div>
                </div>
            </div>
        </el-drawer>

        <!-- 下载 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import { initFilterTime } from "@/utils/index";
import elementTable from "@/components/elementTable";
import exportExcel from "@/components/exportExcel";
import chatList from "@/components/chatList/index.vue";
import { mapGetters } from "vuex";
import { getChatLog, getMessageHistoryById, exportSessionList } from "@/api/robotReport";
export default {
    name: "chatLog",
    data() {
        return {
            searchVisivle: false,
            drawerVisible: false,
            time: "0",
            date: "",
            keyword: "",
            sourceIds: [],
            userName: "",
            userId: "",
            serviceType: "",
            sessionId: "",
            detailInfo: {},
            chatListData: [],
            chatLogList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "用户ID",
                        prop: "userId",
                    }
                },
                {
                    config: {
                        label: "用户姓名",
                        prop: "userName",
                    }
                },
                {
                    config: {
                        label: "渠道",
                        prop: "sourceName",
                    }
                },
                {
                    config: {
                        label: "开始时间",
                        prop: "questionCreateTime",
                    }
                },
                {
                    config: {
                        label: "会话ID",
                        prop: "sessionId",
                    }
                },
                {
                    config: {
                        label: "是否转人工",
                    },
                    render: (h, scope) => {
                        return (<span>{scope.serviceType == "seat" ? "是" : "否"}</span>)
                    }
                },
                {
                    config: {
                        label: "操作",
                        width: "100"
                    },
                    render: (h, scope) => {
                        return (
                            <div class="operation">
                                <el-tooltip effect="light" content="查看详情" placement="top" enterable={false}>
                                    <span class="iconfont icon-chakanliaotianjilu1" onClick={() => this.checkDetail(scope)}></span>
                                </el-tooltip>
                                <el-tooltip effect="light" content="下载" placement="top" enterable={false}>
                                    <span class="iconfont icon-xiazai"></span>
                                </el-tooltip>
                            </div>
                        );
                    },
                }
            ],
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
        }
    },
    methods: {
        getChatLog() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            this.tableLoading = true;
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                keyword: this.keyword,
                sourceIds: this.sourceIds,
                userName: this.userName,
                userId: this.userId,
                serviceType: this.serviceType,
                sessionId: this.sessionId,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            getChatLog(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    this.chatLogList = resp.data.list;
                    this.total = resp.data.total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        searchList() {
            this.pageNo = 1;
            this.getChatLog();
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
            this.searchList();
        },
        dateRangeChange() {
            this.time = "";
            this.searchList();
        },
        checkDetail(data) {
            var param = {
                messageHistoryId: data.messageHistoryId,
                sourceId: data.sourceId,
                clientId: data.userId
            }
            this.detailInfo = data;
            getMessageHistoryById(param).then(resp => {
                if (resp.status == 0) {
                    this.chatListData = resp.data;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
            this.drawerVisible = true;
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getChatLog();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getChatLog();
        },
        exportAll() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                keyword: this.keyword,
                sourceIds: this.sourceIds,
                userName: this.userName,
                userId: this.userId,
                serviceType: this.serviceType,
                sessionId: this.sessionId,
            }
            this.$refs.exportExcel.showLoading();
            exportSessionList(param).then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports("聊天日志数据", resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        resetSearch() {
            this.sourceIds = [];
            this.userName = this.userId = this.serviceType = this.sessionId = "";
        }
    },
    created() {
        this.date = initFilterTime(0);
        this.getChatLog();
        // document.addEventListener('mouseup', (e) => {
        //     var chatLogSearch = document.querySelector('#chatLogSearch');
        //     if (chatLogSearch) {
        //         if ($(e.target).parents(".el-popper").length == 0 && !chatLogSearch.contains(e.target)) {
        //             this.searchVisivle = false;
        //         }
        //     }
        // })
    },
    computed: {
        ...mapGetters(["sourceList"]),
        tableHeight() {
            return document.body.clientHeight - 310;
        },
    },
    components: {
        elementTable,
        exportExcel,
        chatList
    }
}
</script>

<style lang="scss">
.chatLog {
    height: 100%;
    #chatLogSearch {
        top: 130px;
        height: 305px;
        .searchBox {
            .searchItem {
                > span {
                    width: 70px;
                }
            }
        }
        .ant-select-selection--multiple {
            height: 34px;
            overflow-y: scroll;
        }
    }
}
.logDrawer {
    .title-header {
        p:first-child {
            font-size: 16px;
            color: #363c43;
        }
        p:last-child {
            color: #676e75;
        }
    }
    .el-drawer__body {
        padding: 20px;
        .el-descriptions {
            padding: 20px 20px 10px 20px;
            background: #f5f7fa;
            border-radius: 6px;
            margin-bottom: 20px;
            .el-descriptions__body {
                background: #f5f7fa;
            }
            .el-descriptions-item__cell {
                padding-bottom: 10px !important;
            }
        }
        .chat-content {
            position: relative;
            height: calc(100% - 115px);
            background: #f5f7fa;
            border-radius: 6px;
            padding: 20px;
            .chatBox {
                position: relative;
                height: 100%;
                background: #fff;
                .chatLogList {
                    height: 100%;
                }
            }
            .chat-search {
                position: absolute;
                width: 100%;
                height: 60px;
                left: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-shadow: 0px 3px 15px 0px rgba(102, 112, 123, 0.1);
                .el-input__suffix {
                    right: 10px;
                }
                .icon-sousuo {
                    font-size: 22px;
                    color: #b7c1c9;
                }
            }
            .chatDataList {
                height: calc(100% - 65px);
                overflow-y: scroll;
                padding: 20px;
            }
        }
    }
}
.descLabel {
    color: #676e75;
    margin-right: 15px !important;
    flex-shrink: 0;
    width: 60px;
    text-align: right;
    display: inline-block !important;
}
.descContent {
    color: #676e75;
    > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 85%;
    }
}
</style>